<template>
    <div class="chart-component-container" :style="'width:' + props.width + 'px;height:' + props.height + 'px;'">
        <div class="chart" ref="chart"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts"
import { getCurrentInstance, nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
const _this = getCurrentInstance().proxy;
const vdata = reactive({
    myChart: null,
})

const props = defineProps(['width', 'height', 'xlist', 'barData'])
watch(() => props.xlist, () => {
    nextTick(() => {
        initChart();
    })
})

onMounted(() => {
    nextTick(() => {
        initChart();
    })
})


function initChart() {
    //shallowRef赋值，否则一些情况报错（可以试试），防止vue3深层代理proxy导致的ecahrts部分错误
    vdata.myChart = shallowRef(echarts.init(_this.$refs.chart)); 
    vdata.myChart.clear();
    var option = {
        
    };
    vdata.myChart.setOption(option);
    window.addEventListener('resize', function () {
        vdata.myChart.resize();
    })
}

</script>

<style lang="scss" scoped>
.chart-component-container{
    width: 100%;
    height: 100%;

    .chart{
        width:100%; height:100%;
    }
}
</style>